<template>
  <el-pagination
    style="text-align: right"
    @size-change="handlerSizeChange"
    @current-change="handlerCurrentChange"
    @prev-click="prevClick"
    @next-click="nextClick"
    :current-page="attrs.currentPage || 1"
    :total="attrs.total || 0"
    :page-size="attrs.pageSize || 10"
    :pageSizes="attrs.pageSizes || [10,20,30]"
    :layout="attrs.layout || 'sizes, prev, pager, next, total, jumper'"
    :small="attrs.small || false"
    :background="attrs.background || false"
    :pager-count="attrs.pagerCount || 5"
    :prev-text="attrs.prevText"
    :next-text="attrs.nextText"
    :disabled="attrs.disabled || false"
    :hide-on-single-page="attrs.hideOnSinglePage || false"
  >
  </el-pagination>
</template>
<script>
export default {
  name: "MsuiPagination",
  props: {
    attrs: {
      type: Object,
      default: () => {
        return {};
      },
    },
  },
  watch: {
      attrs: {
        handler() {
            this.$emit('change', this.attrs.currentPage, this.attrs.pageSize)
        },
        deep: true
      }
  },
  methods: {
    handlerSizeChange(size) {
      this.attrs.pageSize = size
      this.$emit('change', this.attrs.currentPage, size)
    },
    handlerCurrentChange(current) {
      this.attrs.currentPage = current
    },
    prevClick(page) {
      this.attrs.currentPage = page
    },
    nextClick(page) {
      this.attrs.currentPage = page
    }
  }
};
</script>
